<template>
	<view class="container top-padding-container">
		<image class="seeker-bg" src="/static/seeker-home/bg.png"></image>
		<view class="content">
			<view class="tab-content">
				<up-tabs
					:current="activeTabs"
					:activeStyle="{
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:lineWidth="30"
					:lineHeight="10"
					:lineColor="`url(${tabIcon}) 100% 100%`"
					:list="tabList"
					@click="clickTab"
				>
					<template #right>
						<view slot="right" style="padding-left: 4px" @tap="filterIconClick">
							<u-icon name="/static/common/filter-icon.png" :size="20"></u-icon>
						</view>
					</template>
				</up-tabs>
			</view>
			<view class="search-content">
				<SearchBtn @jumpToUrl="jumpToSearch" />
			</view>
			<view class="list-content">
				<Recommend v-show="tabList[activeTabs].componentName === 'recommend'" :searchValue="searchValue"></Recommend>
				<Vicinity v-show="tabList[activeTabs].componentName === 'vicinity'" :searchValue="searchValue"></Vicinity>
				<UpToDate v-show="tabList[activeTabs].componentName === 'upToDate'" :searchValue="searchValue"></UpToDate>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import Recommend from './recommend/index.vue';
import Vicinity from './vicinity/index.vue';
import UpToDate from './online/index.vue';
import SearchBtn from '@/components/search-btn/search-btn.vue';

defineOptions({
	name: 'SolverHomeIndex'
});
// 当前激活的tab
const activeTabs = ref(0);
// 搜索值
const searchValue = ref('');
// tabs的列表
const tabList = reactive<UviewTabsItem[]>([
	{
		name: '推荐',
		componentName: 'recommend'
	},
	{
		name: '附近',
		componentName: 'vicinity'
	},
	{
		name: '最新',
		componentName: 'upToDate'
	}
]);
// 激活tab的icon
const tabIcon = '/static/seeker-home/tab-select-icon.png';

const clickTab = (obj: InstanceType<typeof UTabs>) => {
debugger
	activeTabs.value = obj.index;
};

// 点击筛选icon
const filterIconClick = () => {
	uni.navigateTo({
		url: '/seeker/home-filter/index'
	});
};

// 点击搜索input
const jumpToSearch = () => {
	uni.navigateTo({
		url: '/seeker/home-search/index'
	});
};
</script>

<style lang="scss">
@import '@/styles/common.scss';

.container {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.seeker-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content {
	position: relative;
	z-index: 10;
	width: calc(100% - 40rpx);
	height: calc(100% - 100rpx);
	margin: 20rpx;
	padding-bottom: 110rpx;
}

.list-content {
	width: 100%;
	height: calc(100% - 98px);
	margin: 10px 0;
	overflow: auto;
	background-color: transparent;
}
</style>
